<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Line 3D - ECHARTS-GL</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes"> <!-- Fullscreen Landscape on iOS -->
    <link rel="stylesheet" href="./common.css">
</head>
<body>
<div id="main"></div>
<script src="../node_modules/echarts/dist/echarts.js"></script>
<script src="../dist/echarts-gl.js"></script>
<script src="lib/jquery.min.js"></script>
<script src="js/commonUI.js"></script>
<script>
    var chart = echarts.init(document.getElementById('main'));

    var series = [];

    for (var y = -1; y < 1; y += 0.4) {
        var data = [];
        // Parametric curve
        for (var x = -1; x < 1; x += 0.1) {
            data.push([+x.toFixed(5), +y.toFixed(5), +(Math.sin(x * Math.PI + 0.22) * Math.sin(y * Math.PI + 0.22)).toFixed(5)]);
        }
        series.push({
            type: 'line3D',
            lineStyle: {
                width: 80
            },
            silent: true,
            data: data,
            debug: {
                wireframe: {
                    show: true,
                    lineStyle: {
                        color: '#fff'
                    }
                }
            }
        });
    }

    chart.setOption({
        // backgroundColor: '#fff',
        xAxis3D: {
            type: 'value'
        },
        yAxis3D: {
            type: 'value'
        },
        zAxis3D: {
            type: 'value'
        },
        grid3D: {
            boxDepth: 200,
            boxWidth: 400,
            show: false,
            axisPointer: {
                show: false
            },
            viewControl: {
                beta: 0
            }
        },
        series: series
    });

    window.addEventListener('resize', function () {
        chart.resize();
    });

</script>
</body>
</html>
